<script setup lang="ts">
import {useSettingsStore} from "@/stores/settings.ts";
import BlockLoading from "@/components/BlockLoading.vue";
import {ElMessage} from "element-plus";
import router from "@/router";
import {useTheme} from "@/composables/useTheme.ts";

const settingsStore = useSettingsStore()
const editorStore = useEditorStore()
const { setTheme } = useTheme()
const loadingDesc = ref('正在初始化...')
const showNotebookSet = ref(false)
const tempNotebookPath = ref('')

async function init() {
  await window.bnote.ready.settings()
  loadingDesc.value = '正在加载设置...'
  // 初始化设置
  await settingsStore.init()
  loadingDesc.value = '正在初始化主题...'
  // 初始化主题
  setTheme(settingsStore.settings.appearance.theme)
  loadingDesc.value = '正在检查文件空间...'
  // 检查是否已经设置文件空间
  if (!settingsStore.settings.editor.notebookPath) {
    showNotebookSet.value = true
    return
  }
  loadingDesc.value = '正在加载文件空间...'
  await window.bnote.ready.fileSpace()
  loadingDesc.value = '正在初始化编辑器...'
  await editorStore.init()
  loadingDesc.value = '加载完成，正在跳转...'
  await router.replace('/note')
}

init()

function handleChooseNotebookPath() {
  window.bnote.files.selectPath().then(res => {
    if (!res) return;
    tempNotebookPath.value = res
  })
}

async function submitNotebookPath() {
  if (!tempNotebookPath.value) {
    ElMessage.warning('请选择文件空间地址')
    return
  }
  showNotebookSet.value = false
  loadingDesc.value = '正在保存设置...'
  settingsStore.settings.editor.notebookPath = tempNotebookPath.value
  settingsStore.updateSettings(settingsStore.settings)
  await settingsStore.applySettings()
  loadingDesc.value = '正在初始化文件空间...'
  await window.bnote.ready.fileSpace()
  loadingDesc.value = '正在初始化编辑器...'
  await editorStore.init()
  loadingDesc.value = '初始化完成，正在跳转...'
  await router.replace('/note')
}
</script>

<template>
  <div class="ready-page">
    <div class="loading-content">
      <block-loading></block-loading>
      <div class="loading-text">{{ loadingDesc }}</div>
    </div>
    <transition name="el-zoom-in-center">
      <div class="notebook-set" v-show="showNotebookSet">
        <p>您还未设置文件空间地址，请先选择地址</p>
        <el-input :model-value="tempNotebookPath" placeholder="请选择文件空间" readonly>
          <template #append>
            <el-button type="info" @click="handleChooseNotebookPath">选择地址</el-button>
          </template>
        </el-input>
        <div style="text-align: center; margin-top: 20px;">
          <el-button type="primary" @click="submitNotebookPath">确认</el-button>
        </div>
      </div>
    </transition>
  </div>
</template>

<style scoped lang="scss">
.ready-page {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  .loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;

    .loading-text {
      font-size: 22px;
      font-weight: bold;
    }
  }

  .notebook-set {
    position: absolute;
    width: 500px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
}
</style>
